<template>
    <div class="article_container">
        <loading :flag="loading"></loading>

        <div class="article" v-if="!loading">
            <h3 class="title">{{ lists.title }}</h3>
            <ul>
                <li>• 分类：{{ typeTab }}</li>
                <li>• {{ lists.visit_count }}次访问</li>
                <li>• 发布于{{ lists.create_at | dateFormat }}</li>
                <li>• 作者：<a href="#">{{ lists.author.loginname }}</a></li>
            </ul>
            <div id="content" v-html="lists.content"></div>
        </div>
        <div class="replies">
            <div v-for="(item,index) in lists.replies" :key="item.id" class="replySec">
                <div class="replyTop">
                    <router-link :to="{ name: 'user_info',params: { name: item.author.loginname }}">
                        <img :src="item.author.avatar_url">
                    </router-link>
                    <router-link class="username" 
                        :to="{ name: 'user_info',params: { name: item.author.loginname }}">
                        {{ item.author.loginname }}
                    </router-link>
                    <span>{{ index+1 }}楼</span>
                </div>
                <section v-if="item.ups.length > 0" class="thumbClass">
                    <span>❤ </span>{{ item.ups.length }}
                </section>
                <p v-html="item.content"></p>
            </div>
        </div>
    </div>    
</template>

<script>
import loading from './subcomponents/loading.vue'

export default {
    name: 'Article',
    data(){
        return {
            loading: false,
            lists: {
                author: {
                    loginname: 'temp'
                }
            }
        }
    },
    computed: {
        typeTab(){
            var type = this.lists.tab
            const tab = {
                ask: '问答',
                share: '分享',
                job: '招聘',
                good: '精华'
            }
            return tab[type]
        }
    },
    mounted(){
        this.loading = true
        this.getData()
    },
    methods: {
        getData(){
            this.axios({
                url: `https://cnodejs.org/api/v1/topic/${this.$route.params.id}`,
                method: 'get',
                params:{
                    mdrender:true
                }
            })
            .then(res=>{
                console.log(res)
                this.lists = res.data.data
                this.loading = false
            })
        }
    },
    watch: {
        $route(){
            this.getData()
        }
    },
    components: {
        loading
    }
}
</script>

<style lang="scss">
    @import url(../assets/markdown-github.css);

    .article_container {
        width: 70%;
        border: 1px solid #ddd;
        padding: 0.8rem 0.4rem;
        margin-left: 3%;
        display: inline-block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;

        .article {
            background-color: #fff;
            margin-bottom: 10px;
            padding-left: 20px;
            padding-top: 10px;

            h3.title {
                font-size: 1.2rem;
                margin: 12px 0;
            }

            #content {
                padding: 2rem 1rem 2rem 1rem;
                line-height: 1.6;
                padding-bottom: 1rem;
            }
        }
        .article >ul {

            li {
                font-size: 0.8rem;
                color: #a8a3a3;
                padding-left: 5px;
                display: inline-block;

                a {
                    color: inherit;
                    text-decoration: none;
                }
            }
        }
        .replies {
            background-color: #fff;
            display: flex;
            flex-direction: column;

            .replySec {
                padding: 1rem;
                border-bottom: 1px solid #c0ccda;

                .replyTop {
                    img {
                        width: 1.5rem;
                        height: 1.5rem;
                    }
                    span {
                        font-size: 14px;
                        color: #806767;
                        margin-left: 6px;
                    }
                    a {
                        text-decoration: none;
                        color: inherit;
                    }
                    a.username {
                        font-weight: bold;
                        vertical-align: super;
                    }
                }
                p {
                    img {
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                    }
                }
            }
            .replySec > p {
                padding-left: 50px;
                clear: both;
            }
            .thumbClass {
                color: red;
            }
        }
    }
</style>
